<template>
	<view class="app-invite">
		<!-- <UniStatusBar bgcolor="transparent"></UniStatusBar> -->
		<!-- <uni-nav-bar
		statusBar="true" 
		:fixed="true" 
		:border="false"
		:leftIcons="true"
		bgcolor="transparent"
		backgroundColor="transparent"
		leftIcon="back"
		@click-left="clickClose"
		color="#ffffff">
			<view class="index-top-nav-title">
				<view class="">{{i18n.polite}}</view>
			</view>
		</uni-nav-bar> -->
<!-- 		<view class="gg-top triple"> 
			<view class="iconfont icon-arrow-left" @tap="clickClose"></view>
			<view class="gg-top-title">{{i18n.polite}}</view>
			<view class="iconfont"></view>
		</view> -->
		<view class="content" :style="{backgroundImage:'url('+imgurl+')'}">
			<!-- <view class="logo"><image src="/static/imgs/avatar.png" lazy-load></image></view> -->
		<!-- 	<view class="ad1"><view class="txt-ad1">{{i18n.invite_lg01}} </view><view class="txt-ad2">{{i18n.invite_lg02}}</view></view> -->
			<!-- <view class="line"></view>
			<view class="ad2"><view class="txt-ad1"> {{i18n.invite_lg03}} </view><view class="txt-ad2">{{i18n.invite_lg04}}</view></view> -->
			
			<view class="invite-code">
				<view class="imgs">
					<view class="code-txt">
						<text class="code-top">{{i18n.InvitationCode}}</text>
						<text class="code-bottom">{{getLoginInfo.yqcode}}</text>
					</view>
					<image :src="qrSrc"></image>
				</view>
				<view class="share-address">
					<view class="share-txt">{{i18n.your_share_address}}</view>
					<view class="share-copy">
						<text>{{addressData}}</text>
						<view class="copy-btn" @tap="copy" hover-class="hover-transform1">{{i18n.service_lg04}}</view>
					</view>
				</view>
				
				<view class="share-btn" hover-class="hover-transform1" @tap.stop="save">{{i18n.Share_this_poster_to_a_friend}}</view>
			</view>
			
			
			
			
		</view>
		
		<toast v-if="showLoadings"></toast>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	// import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	import {checkLogin, fetch, showToast, pageback} from "../../common/js/util.js"
	import toast from '@/components/toast/toast'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	var img_ = require("../../static/imgs/invite-orange-bg.png")
	var img_en = require("../../static/imgs/invite-orange-bg_en.png")
	export default {
		data() {
			return {
				showLoadings:false,
				qrSrc: '',
				addressData: '',
				imgurl:'',
				isfast: false
			}
		},
		onLoad() {
			this.qrSrc = this.getRequestUrl+'/static/zhifu_img/username_'+this.getLoginInfo.username+'.png';
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.getLang==1?'邀请中心':'Invitation center'
			})
			this.imgurl = this.getLang==1?img_:img_en;
			
			this._getAddress();
		},
		methods: {
			clickClose() {
				pageback();
			},
			copy() {
				if (this.isfast) return;
				this.isfast = true;
				setTimeout(()=> {
					this.isfast = false;
				}, 1500)
				let  _this = this;
				uni.setClipboardData({
					data: this.addressData,
					success: function () {
						uni.showModal({
							title: _this.i18n.copy_success,
							content:  _this.i18n.copy_success_message, 
							showCancel:false,
							success: function(res) {
								if (res.confirm) {											 
									//console.log('用户点击确定');
								} else if (res.cancel) {
									//console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			save () {
				var pages = getCurrentPages();  
		        var page = pages[pages.length - 1];
		        var bitmap=null;  
				// 获得当前webview对象
		        var currentWebview = page.$getAppWebview();
				// 要绘制的图片对象
		        bitmap = new plus.nativeObj.Bitmap('amway_img');  
		        // 将webview内容绘制到Bitmap对象中  
		        currentWebview.draw(
					bitmap,
					// 成功的回调函数
					function(){
						bitmap.save(
						// 要保存的图片路径 相对路径URL(RelativeURL) - 以"_"开头的相对路径
						// 因为内容可能改变 所以使用随机数作为文件的名字
						"_doc/"+Math.random()+".jpg"  
						// 可设置保存图片的格式，压缩质量等参数。
						,{}  
						,function(i){
							uni.saveImageToPhotosAlbum({  
								filePath: i.target,  
								success: function () {  
									bitmap.clear(); //销毁Bitmap图片  
									uni.showToast({  
										title: '保存图片成功',  
										duration: 1500,
										icon: "none"
									});  
								}  
							});  
						}  
						,function(e){
							uni.showToast({  
								title: '保存图片失败',  
								duration: 1500,
								icon: "none"
							});
						});  
					},
					// 失败的回调函数
					function(e){
						uni.showToast({  
							title: '保存图片失败',
							duration: 1500,
							icon: "none"
						});
					}
				);
			},
			_getAddress() {
				let _data = {
						id: this.getLoginInfo.id,
						token: this.getLoginInfo.token
					}
					this.showLoadings = true
				fetch(this.getRequestUrl + '/api/user/userQrcode', _data, 'post')
					.then(res => {
						this.showLoadings = false
						// console.log(JSON.stringify(res));
						checkLogin(this.getLoginInfo,this.getRequestUrl);
						if (res.data.code) {
							this.addressData = res.data.data.qrcode;
						} else {
							showToast(res.data.msg);
						}
					})
					.catch(res=> {
						this.showLoadings = false
						showToast(this.i18n.request_fail);
					})
			}
		},
		computed: {
			i18n () {  
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLoginInfo',
				'getLang'
			])
		},
		components: {
			toast,uniNavBar
		}
	}
</script>
<style lang="scss">
@import '../../common/scss/variable.scss';

.index-top-nav-title{
	display: flex;
	align-items: center;
}
.app-invite {
	.gg-top {
		width: 100%;
		position: absolute;
		left: 0;
		top: 80upx;
		background-color: transparent;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		view {
			color: #ffffff;
			&.iconfont {
				width: 60upx;
				color: #ffffff;
			}
			&.gg-top-title{
				flex: 1;
				text-align: center;
			}
		}
	}
	.content {
		width: 750upx;
		background-size: 750upx;
		height: 1465upx;
		margin-top: -30upx;
		background-repeat: no-repeat;
		position: relative;
		background-position: left top;
		.logo {
			position: absolute;
			left: 30upx;
			top: 64upx;
			image {
				width: 120upx;
				height: 120upx;
				border-radius: 120upx;
				// border: 4upx solid rgba($color: #ffffff, $alpha: .6);
			}
		}
		.ad1 {
			position: absolute;
			left: 30upx;
			top: 235upx;
			.txt-ad1, .txt-ad2 {
				font-size: 34px;
				line-height: 45px;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		.line {
			width: 66upx;
			height: 9upx;
			background-color: #FFFFFF;
			position: absolute;
			left: 30upx;
			top: 448upx;
		}
		.ad2 {
			position: absolute;
			left: 30upx;
			top: 506upx;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 25px;
			line-height: 40px;
		}
		.invite-code{
			background-color: #000830;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 5;
			width: 710upx;
			padding: 44upx 0 24upx 43upx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			.imgs {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 230upx;
				width: 690upx;
				image {
					width: 230upx;
					height: 230upx;
					margin-right: 27upx;
				}
				.code-txt {
					width: 396upx;
					height: 173upx;
					background-size: cover;
					.code-top {
						font-size: 30upx;
						color: #ffffff;
						padding-bottom: 29upx;
						display: block;
					}
					.code-bottom {
						font-weight: bold;
						font-size: 24upx;
						color: #ffffff;
						line-height: 60upx;
						text-align: center;
						display: block;
						width: 200upx;
						border-radius: 8upx;
						background-color: #071041;
					}
				}
			}
			.share-address {
				.share-txt {
					font-size: 15px;
					font-weight: bold;
					color: #ffffff;
					margin-bottom: 34upx;
				}
				.share-copy {
					width: 544upx;
					height: 78upx;
					background-color: #071041;
					border-radius: 8upx;
					padding: 0 45upx 0 20upx;
					line-height: 78upx;
					position: relative;
					color: #ffffff;
					font-size: 12px;
					text{
						display: block;
						width: 400upx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}
					.copy-btn {
						width: 134upx;
						height: 78upx;
						border-radius: 78upx;
						color:#ffffff;
						font-size: 26upx;
						font-weight: 500;
						position: absolute;
						right: 0;
						top: 0;
						text-align: center;
						line-height: 75upx;
					}
				}
			}
			
			.share-btn {
				width: 374upx;
				margin: 54upx auto 0;
				height: 82upx;
				color: #FFFFFF;
				border: 2upx solid #FFFFFF;
				border-radius: 8upx;
				text-align: center;
				line-height: 82upx;
				font-size: 15px;
				font-weight: 500;
				transition: all .2s linear;
				background: #071041;
				&.hover-transform1{
					transform: scale(.9);
					opacity: .9;
					background-color: #ffff00;
					border-color: #ffff00;
					color: #333333;
				}
			}
		}
		
	}
}
</style>
